<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>创建节点</h1>
    <ul>
        <li>document.createElement(name)：创建元素节点。</li>
        <li>document.createTextNode(value)：创建文本节点。</li>
    </ul>
    <p>appendChild(node)：把节点添加到元素的末尾。</p>
    <div class="div1"></div>
    填入：<input type="text" onchange="handleChange(this)">
    <script>

        let div = document.querySelector(".div1");

        function handleChange(input) {
            let value = input.value;
            // 创建文本节点
            let textNode = document.createTextNode(value);

            // 创建元素节点
            let p = document.createElement("p");

            // 把文本节点添加到p标签中
            p.appendChild(textNode);
            // 把p标签添加到div标签中
            div.appendChild(p);
        }

    </script>
</body>
</html>